<template>
  <div class="col-md-9">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="right_top">
          <el-tab-pane label="算力订单" name="first">
            <el-table
              :data="tableData.slice(currentPage,page)"
              :cell-style="text1"
              :header-cell-style="text2"
              :default-sort="{prop: 'date', order: 'descending'}"
              style="width: 100%"
            >
              <!-- //prop均未修改 -->
              <el-table-column sortable prop="date" label="订单编号" width="120"></el-table-column>
              <el-table-column sortable prop="name" label="下单日期" width="100"></el-table-column>
              <el-table-column sortable prop="address" label="币种" width="100"></el-table-column>
              <el-table-column sortable prop="name" label="套餐时间" width="100"></el-table-column>
              <el-table-column sortable prop="address" label="已付金额" width="100"></el-table-column>
              <el-table-column sortable prop="name" label="状态" width="100"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button @click="handle(scope.row)" type="primary" plain size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              :page-size="pageSize"
              :pager-count="5"
              layout="prev, pager, next"
              :total="10"
              @current-change="currentChange"
            ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="电费订单" name="second">电费订单</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fatherId:'',
      activeName: "first",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普"
        }
      ],
      pageSize: 2,
      currentPage: 0,
      page: 2
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //查看
    handle(row) {
      console.log(row, 9999);
      //唯一标志来判断跳转的是哪个页面，路由需要数据id判断,暂时用日期代替
      // this.$router.push(`/user/${this.$store.state.targetId}/detail/${row.date}`);
      this.fatherId=this.fatherId=sessionStorage.getItem('userInfo')
      this.$router.push(`/user/${this.fatherId}/detail/${row.date}`);
    },
    //拿到当前页码进行分页
    currentChange(val) {
      console.log(val, 888);
      this.currentPage = (val - 1) * this.pageSize;
      this.page = this.currentPage + this.pageSize;
    },
    //单元格回调，修改样式
    text1({ row, rowIndex }) {
      return "text-align: center";
    },
    //表头回调，修改样式
    text2({ row, rowIndex }) {
      return "text-align: center;font-weight:400;color:rgba(0,0,0,1);";
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-tabs__header {
  background-color: #fff;
  border-radius: 5px;
  .el-tabs__active-bar {
    margin-left: 70px;
  }
  /deep/.el-table td,
  .el-table th.is-leaf {
    padding: 18px 0;
  }
  .el-tabs__item {
    height: 85px;
    line-height: 85px;
    margin-left: 70px;
    font-size: 22px;
    &:nth-child(3) {
      margin-left: 0;
    }
  }
}
.el-pagination {
  text-align: center;
  padding: 42px 0;
  background-color: #fff;
  border-radius: 5px;
}
</style>
